<template>
    <Codemirror
        v-model="ownCodeValue"
        placeholder="请输入代码"
        :style="{'background-color':'#272822','margin-top':'12px'}"
        :autofocus="true"
        :tabSize="2"
        :extensions="extensions"
    ></Codemirror>
</template>

<script setup>
import {Codemirror} from "vue-codemirror";
import {javascript} from "@codemirror/lang-javascript";
import {oneDark} from "@codemirror/theme-one-dark";
import {EditorView} from "@codemirror/view";
import {EditorState} from "@codemirror/state";
import Qilin from "qilin-utils";
import dedent from "dedent";

// 代码主题配置项
const myTheme=EditorView.theme({
    "&": { // 输入的字体颜色
        color: "#fff",
        backgroundColor: "#272822"
    },
    ".cm-content": {
        caretColor: "#0052D9",
    },
    ".cm-activeLine": { // 激活背景色
        backgroundColor: "#272822"
    },
    ".cm-activeLineGutter": { // 激活序列的背景色
        backgroundColor: "#272822"
    },
    "&.cm-focused .cm-cursor": { //光标的颜色
        borderLeftColor: "#0052D9"
    },
    "&.cm-focused .cm-selectionBackground, ::selection": { // 选中的状态
        backgroundColor: "#49483e",
        color:'#0052D9'
    },
    ".cm-gutters": { // 左侧侧边栏的颜色
        backgroundColor: "#272822",
        color: "#ddd", //侧边栏文字颜色
        border: "none"
    }
},{dark:true});
// const codeValue=ref(`console.log(111);\nconsole.log(222);`);

const extensions=[
    javascript(),
    oneDark,
    myTheme,
    EditorView.editable.of(false),
    EditorState.readOnly.of(true)
];

const propsValue=defineProps({
    codeValue:{
        type:String,
        default:"默认代码"
    }
});
const ownCodeValue=computed({
    get(){
        // return Qilin.String.trimString(propsValue.codeValue);
        return dedent(propsValue.codeValue);
    }
});

</script>

<style lang="scss" scoped>
// :deep(.cm-editor){
//     background-color: #272822 !important;
//     .cm-gutters{
//         background-color: #272822 !important;
//         .cm-gutterElement{
//             background-color: #272822 !important;
//         }
//     }
//     .cm-activeLine{
//         background-color: #272822 !important;
//     }
// }
</style>
